<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>配置中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="shortcut icon" href="/static/super_cmdb/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/super_cmdb/css/font.css">
	<link rel="stylesheet" href="/static/super_cmdb/css/xadmin.css">
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
    <script src="/static/super_cmdb/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/xadmin.js"></script>
</head>
<body>
    <!-- 顶部开始 -->
    <div class="container">

        <div class="logo" >
            <img style="width: 40px;height: 46px;position: fixed;top: 0px;left: 5px;" src="/static/super_cmdb/images/橡胶树.png">
            <a style="padding-left: 45px;" href="/super_cmdb/index/">多分区应用配置中心</a>
        </div>
        <div class="left_open">
            <i title="展开左侧栏" class="iconfont">&#xe699;</i>
        </div>
        <ul class="layui-nav left fast-add" lay-filter="">
          <li class="layui-nav-item">
          </li>
        </ul>
        <ul class="layui-nav right" lay-filter="">
          <li class="layui-nav-item" style="width: 220px; padding-right: 20px;">
              <img src="/static/super_cmdb/images/run_dog.gif" style="width: 100%;">
          </li>
          <li class="layui-nav-item" id="color_form">
            <select title="切换主题" id="theme_number" name="theme_number" style="height: 38px; width: 100px; background-color: #222;border: 0;color: white" onchange="sumitTheme();">
                <option value="" id="blink">{{ current_theme.1 }}</option>
                {% for key, value in theme_dict.items %}
                    <option value={{ key }} style="background-color: {{ value.color }}; color: {{ value.font_color }};" >{{ value.name }}</option>
                {% endfor %}
            </select>
          </li>
          <li class="layui-nav-item">
            <form method="post" id="myform">
                {% csrf_token %}
                <select title="切换项目" id="project_id" name="project_id" style="height: 38px; width: 160px; background-color: #222;border: 0;color: white" onchange="submitForm();">
                    <option value="" id="blink">{{ select_project_name }}</option>
                    {% for project_info in project_list %}
                        <option value="{{ project_info.id }}">{{ project_info.name }}</option>
                    {% endfor %}
                </select>
            </form>
          </li>

          <li class="layui-nav-item">
            <a href="javascript:;">{{ request.session.username }}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
              <dd><a onclick="x_admin_show('个人信息','/super_cmdb/user_info/',900,600)">个人信息</a></dd>
              <dd><a href="/super_cmdb/login/">退出</a></dd>
            </dl>
          </li>
        </ul>

    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
     <!-- 左侧菜单开始 -->
    <div class="left-nav" id="on_color">
      <div id="side-nav">
          <ul id="nav">
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe696;</i>
                    <cite>系统管理</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="/super_cmdb/role_list/">
                            <i class="iconfont">&#xe70b;</i>
                            <cite>角色管理</cite>
                        </a>
                    </li >
                    <li>
                        <a _href="/super_cmdb/user_list/">
                            <i class="iconfont">&#xe6b8;</i>
                            <cite>用户管理</cite>
                        </a>
                    </li >
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont">&#xe699;</i>
                            <cite>项目管理</cite>
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a _href="/super_cmdb/project_list/">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>列表配置</cite>
                                </a>
                            </li >
                            <li>
                                <a _href="/super_cmdb/permission_set/">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>项目权限</cite>
                                </a>
                            </li >
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a _href="/configcenter/conf_setting_list/">
                    <i class="iconfont">&#xe6ae;</i>
                    <cite>配置中心</cite>
                </a>
            </li >
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe75f;</i>
                    <cite>应用管理</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="/configcenter/gameserver_group_list/">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>应用分区</cite>
                        </a>
                    </li >
                    <li>
                        <a _href="/configcenter/gameserver_list/">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>应用列表</cite>
                        </a>
                    </li >
                </ul>
            </li>
            <li>
                <a _href="/configcenter/demo/">
                    <i class="iconfont">&#xe811;</i>
                    <cite>配置案例</cite>
                </a>
            </li >

        </ul>
      </div>
    </div>
    <!-- <div class="x-slide_left"></div> -->
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
          <ul class="layui-tab-title" id="nav_color">
            <li class="home"><i class="layui-icon">&#xe68e;</i>我的桌面</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe src='/super_cmdb/welcome/' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
            </div>
          </div>
        </div>
    </div>
    <div class="page-content-bg"></div>
    <!-- 右侧主体结束 -->
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2020 chenjianwen All Rights Reserved</div>
    </div>
    <!-- 底部结束 -->
</body>

<script src="/static/super_cmdb/live2d/L2Dwidget.min.js"></script>
<script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/super_cmdb/js/jquery.form.min.js"></script>
<script>
      L2Dwidget.init({
        model: {
          jsonPath: '/static/super_cmdb/live2d/tororo/assets/tororo.model.json',
        },
        display: {
          superSample: 2,
          width: 100,
          height: 100,
          position: 'right',
          hOffset: 0,
          vOffset: 40,
        },
        mobile: {
          show: true,
          scale: 1,
          motion: true,
        },
        react: {
          opacityDefault: 0.8,
          opacityOnHover: 0.2,
        }
      });

    function submitForm(){
        //获取form表单对象,提交选择项目
        var form = document.getElementById("myform");
        form.submit();//form表单提交
    }

    {#function changeColor(){#}
    {#    var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";#}
    {#    color=color.split("|");#}
    {#    document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];#}
    //{#}#}
    {#setInterval("changeColor()",200);#}
    //选中着色,包含这个标签下的所有子标签
    var trs = document.getElementById('on_color').getElementsByTagName('a');
    window.onload = function(){
        for( var i=0; i<trs.length; i++ ){
            trs[i].onmousedown = function(){
                tronmousedown(this);
            }
        }
    };
    function tronmousedown(obj){
        for( var o=0; o<trs.length; o++ ){
            if( trs[o] == obj ){
                trs[o].style.backgroundColor = 'rgb(174, 212, 234)';
            }
            else{
                trs[o].style.backgroundColor = '';
            }
        }
    }

    function sumitTheme() {
        // 获取form表单对象,提交选择项目
        // var form = document.getElementById("color_form");
        // form.submit();//form表单提交
        console.log("开始切换主题")
        let theme_number=$("#theme_number").val();
        $.ajax({
            url: "/super_cmdb/index/",
            type: "POST",
            data: {
                "csrfmiddlewaretoken": '{{ csrf_token }}',
                "theme_number": theme_number,
            },
            success: function (data) {
                window.location.href="/super_cmdb/index/";
            }
        });
        console.log("完成切换主题")
    }

    // 获取到数据记录的主题，执行函数生效
    var select_theme = {{ current_theme.0 }}
    changeBackgroundColor()
    function changeBackgroundColor() {
        // var select_theme = $("#changeBackgroundColor").val();
        console.log(select_theme)
        {% for key,value in theme_dict.items %}
            if ( {{ key }} == select_theme ) {
                console.log("{{ key }}", "{{ value.color }}")
                // 获取左侧菜单对象
                let menu_obj = document.getElementById("on_color");
                menu_obj.style.backgroundColor= "{{ value.color }}";
                menu_obj.style.backgroundImage = "url({{ value.image }})";
                menu_obj.style.backgroundSize = "100% 100%";
                let nav_font_obj = $('#nav');
                nav_font_obj.find('cite').css('color', '{{ value.font_color }}');
                nav_font_obj.find('i').css('color', '{{ value.font_color }}');
                let nav_obj = document.getElementById("nav_color");
                nav_obj.style.backgroundColor= "{{ value.color }}";
                nav_obj.style.backgroundImage = "url({{ value.nav_image }})";
                nav_obj.style.backgroundSize = "100%";
                nav_obj.style.color = '{{ value.font_color }}';
            }
        {% endfor %}
	}


</script>

</html>
